<template>
  <div id="buycart">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="info">
      <span>30天无忧退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
    <div class="list">
      <div class="cartItem" v-for="(item, index) in cartList" :key="index">
        <van-checkbox
          v-model="item.checked"
          @change="checkEvent($event, item)"
        ></van-checkbox>
        <van-image
          width="10rem"
          height="10rem"
          fit="contain"
          :src="item.list_pic_url"
        />

        <div class="proBrief">
          <div class="title">
            {{ item.goods_name }}
            <span class="num">x{{ item.number }}</span>
          </div>
          <p class="brief">{{ item.goods_specifition_name_value }}</p>
          <p class="price">￥{{ item.retail_price }}</p>
        </div>
      </div>
    </div>
    <van-submit-bar
      :price="cartTotal.checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkedAll">全选</van-checkbox>
      <span slot="tip"> 你的收货地址不支持同城送, <span>修改地址</span> </span>
    </van-submit-bar>
  </div>
</template>


<script>
import axios from "axios";
import { mapState } from "vuex";
let mapStateObj = mapState(["cartTotal", "cartList"]);
export default {
  data() {
    return {
      checked: null,
      data: [],
    };
  },
  computed: {
    ...mapStateObj,
    checkedAll: {
      set(val) {
        // console.log(val);

        console.log(val, "设置全选");
      },
      get() {
        if (this.cartTotal.goodsCount == this.cartTotal.checkedGoodsCount) {
          return true;
        } else {
          return false;
        }
      },
    },
  },
  created() {
    let res = this.$store.dispatch("AjaxCart");
    // console.log(res);
    // let this.data = res.
    this.data = res.data.cartList;
    // console.log(data);
  },
  mounted() {
    // console.log(this.cartList);
  },
  methods: {
    onClickLeft: function () {
      this.$router.go(-1);
    },
    onSubmit: function () {}, 
    checkEvent: async function (event, item) {
      // console.log(item)
      let res = await axios.post(this.$root.api.CartChecked, {
        isChecked: Number(event),
        productIds: item.product_id,
      });
      let data = res.data.data;
      // console.log(data)
      this.$store.commit("setCarList", data.cartList),
        this.$store.commit("setCartTotal", data.cartTotal);
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="less">
#buycart {
  .info {
    display: flex;
    justify-content: space-around;
    font-size: 12px;
    color: #999;
    height: 24px;
    line-height: 24px;
    background: #efefef;
    span {
      position: relative;
    }
    span::before {
      content: "";
      display: block;
      position: absolute;
      left: -10px;
      top: 8px;
      width: 4px;
      height: 4px;
      border-radius: 2px;
      border: 1px solid red;
    }
  }
  .cartItem {
    padding: 0 5px;
    display: flex;
    align-items: center;
    padding: 10px 5px;
    .van-checkbox {
      margin: 0 5px;
    }
    .van-image {
      background: #efefef;
    }
    .proBrief {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;
      height: 70px;
      padding: 0 10px;
      .title {
        width: 100%;
        font-size: 14px;
        display: flex;
        justify-content: space-between;
      }
      .brief {
        color: #999;
        font-size: 12px;
      }
    }
  }
}
</style>